<template>
  <!-- 佣金明细 -->
  <view class="brokerage-details-content">
    <view class="details-top">
      <text class="amount-value">0.00</text>
      <text class="amount-hint">总佣金</text>
    </view>
    <view class="details-list">
      <template>
        <view class="detail-list-item">
          <view class="item-left">
            <text class="left-name">用户名称</text>
            <text class="left-id">123123123123123123</text>
          </view>
          <view class="item-center">
            <text class="center-value">实付：{{"¥ 8.00"}}</text>
            <text class="center-date">2025-03-05 14:07:57</text>
          </view>
          <view class="item-right">
            <text class="right-value">{{"+0.22"}}</text>
            <text class="right-type-name">{{"返佣"}}</text>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { onReady, onLoad } from '@dcloudio/uni-app';

  onLoad(() => {

  })
  onReady(() => {
    console.log('onReady--')

  })
</script>

<style lang="scss">
  .brokerage-details-content {
    width: 100%;
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    // background: #FAFAFA;
  }

  .details-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    background: #fff;

    .amount-value {
      font-size: 60rpx;
      color: #FFB200;
    }

    .amount-hint {
      font-size: 35rpx;
    }

  }

  .details-list {
    width: 100%;

    .detail-list-item {
      display: inline-flex;
      width: 100%;
      height: 140rpx;
      margin-top: 20rpx;
      padding: 0 10rpx;
      border-bottom: 2rpx solid #c8c8c8;
      box-sizing: border-box;

      .item-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 40%;
        height: 100%;
        overflow: hidden;

        .left-name {
          font-size: 30rpx;
          font-weight: 700;
          padding: 10rpx 0;
        }

        .left-id {
          width: 80%;
          font-size: 25rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

      }

      .item-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 40%;
        height: 100%;

        .center-value {
          font-size: 30rpx;
          font-weight: 700;
          padding: 10rpx 0;
        }

        .center-date {
          font-size: 25rpx;
        }

      }

      .item-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: 20%;
        height: 100%;

        .right-value {
          font-size: 30rpx;
          padding: 10rpx 0;
          color: #FA251E;
        }

        .right-type-name {
          font-size: 25rpx;
        }

      }

    }

  }
</style>